<template>
  <div class="Resource">
    <el-tabs v-model="activeName" class="tabs" stretch>
      <el-tab-pane label="全部" name="all">
        <div class="box">
          <div v-for="item in resourceListAll" v-bind:key="item.id">
            <MyTab :resourceItem="item"></MyTab>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="常用工具" name="tool">
        <div class="box">
          <div v-for="item in resourceListTool" v-bind:key="item.id">
            <MyTab :resourceItem="item"></MyTab>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频教程" name="video">
        <div class="box">
          <div v-for="item in resourceListVideo" v-bind:key="item.id">
            <MyTab :resourceItem="item"></MyTab>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="电子书" name="e-book">
        <div class="box">
          <div v-for="item in resourceListE_Book" v-bind:key="item.id">
            <MyTab :resourceItem="item"></MyTab>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
} from "@/util/local-storage.js";
import axios from "axios";

export default {
  name: "Resource",
  inject: ["routerRefresh"],
  data() {
    return {
      activeName: "all",
      resourceListAll: [],
      resourceListTool: [],
      resourceListVideo: [],
      resourceListE_Book: [],
    };
  },
  methods: {
    getResourceList() {
      axios.get("http://localhost:8083/resource/getList").then((res) => {
        console.log("res.list:", res.data.data.list);
        this.resourceListAll = res.data.data.list;
        res.data.data.list.forEach((item) => {
          if (item.resourceType == 1) {
            this.resourceListTool.push(item);
          } else if (item.resourceType == 2) {
            this.resourceListVideo.push(item);
          } else if (item.resourceType == 3) {
            this.resourceListE_Book.push(item);
          }
        });
        console.log("resourceListAll:", this.resourceListAll);
      });
    },
  },

  created() {
    this.getResourceList();
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.Resource {
  padding: 80px 15% 0 15%;
}
.tabs {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
